<template>
<div class="footer">
    <div class="tabbar">
          <router-link tag="div"  to="/header" class="tabberList" @click.native="tabberList(0)">
              <div class="tabbaricon">
                <img :src="tabbarIndex==0?'../assets/img/tabbaricon2.png':'../assets/img/tabbaricon1.png'" alt="首页">
              </div>
              <span :class="tabbarIndex==0?'tabbarActive':''">首页</span>
          </router-link>
          <router-link tag="div"  to="/release" class="tabberList" @click.native="tabberList(1)">
              <div class="tabbaricon">
                <img src="../assets/img/tabbaricon4.png" alt="发布">
              </div>
              <span class="tabbarActive">发布</span>
          </router-link>
          <router-link tag="div"  to="/my" class="tabberList" @click.native="tabberList(2)">
              <div class="tabbaricon">
                <img src="../assets/img/tabbaricon5.png" alt="我的">
              </div>
              <span :class="tabbarIndex==2?'tabbarActive':''">我的</span>
          </router-link>
    </div>
    <router-view></router-view>
    </div>
</template>

<script>
export default {
  name: "tabbar",
  data() {
    return {
      tabbarIndex: 0
    };
  },
  methods:{
    tabberList:function (index) {
      this.tabbarIndex = index
    }
  }
};
</script>

<style scoped>
.tabbar {
  display: flex;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  box-sizing: border-box;
  padding: 0.1rem;
  background: #fff;
  border-top: 1px solid #f1f1f1;
}
.tabberList {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 14px;
}
.tabbaricon {
  width: 0.5rem;
  height: 0.5rem;
  margin-bottom: 0.1rem;
}
.tabbaricon > img {
  width: 100%;
  height: 100%;
  display: block;
}
.tabbarActive {
  color: #e55583;
}
</style>
